<template>
  <view>
    <view class="goods_item">
      <view class="left">
        <!-- 默认的图片 -->
        <radio :checked='state' color='#e00000' v-if='showRaido' @click='radioChange'></radio>
        <image :src="img==''?defaultSrc:img" mode="heightFix" class="logo"></image>
      </view>
      <view class="right">
        <text class="title">{{title}}</text>
        <view class="box">
          <text class="price">￥ {{price|toFixed}}</text>
          <uni-number-box @change="NumChange" :min="1" :value="count" v-if='showNumber'></uni-number-box>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name:"myGoodItem",
    filters:{
      toFixed(num){
        return parseFloat(num).toFixed(2);
      }
    },
    methods:{
      radioChange(e){
        this.$emit('radioChange',{
          goods_id:this.idx,
          goods_state:!this.state
        })
      },
      NumChange(val){
        this.$emit('NumChange',{
          goods_id:this.idx,
          goods_count:+val
        })
      }
    },
    props:{
      img:{
        type:String
      },
      title:{
        type:String
      },
      price:{
        type:String
      },
      showRaido:{
        type:Boolean,
        // 默认情况下不会展示Radio组件
        default:false
      },
      state:{
        type:Boolean
      },
      idx:{
        type:String,
      },
      count:{
        type:String
      },
      showNumber:{
        type:Boolean,
        default:false
      }
    },
    data() {
      return {
        defaultSrc:'http://image5.suning.cn/uimg/b2c/newcatentries/0000000000-000000000160455569_1_400x400.jpg'
      };
    }
  }
</script>

<style lang="scss" scoped>
.goods_item{
    display: flex;
    height: 220rpx;
    border-bottom: 2rpx solid #ddd;
    .left{
      display: flex;
      align-items: center;
      .logo{
        height: 100%;
        margin-right: 20rpx;
      }
    }
    .right{
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      flex:1;
      .title{
        display: block;
        word-break: break-all;
        font-size: 28rpx;
        padding-top: 6rpx;
      }
      .box{
        display: flex;
        justify-content: space-between;
        .price{
          color: red;
        }
      }
    }
  }

</style>